<template>
	<view>
		<view class="lc-head-cons" :style="'height:'+headHeight+'rpx;'"></view>
		<view class="lc-user-box" v-if="isLogin" @click="gouser">
			<image :src="detail.avatar" mode="aspectFill" class="lc-user-img"></image>
			<view class="lc-user-detail">
				<view>{{detail.nickname}}</view>
				<image :src="baseurl+'/imgs/m1.png'" mode="widthFix" @click="setting"></image>
			</view>
		</view>
		<view class="lc-user-box" v-else @click="login">
			<image src="https://pic1.imgdb.cn/item/681b1feb58cb8da5c8e2b06e.png" mode="aspectFill" class="lc-user-img">
			</image>
			<view class="lc-user-detail">
				<view>登录/注册</view>
			</view>
		</view>
		<view class="lc-data-box">
			<view class="lc-cde" @click="collectBuying">
				<view class="lc-data-num">{{numList.shoucang_tuangou_num}}</view>
				<view class="lc-data-name">收藏团购</view>
			</view>
			<view class="lc-cde" @click="collectHire">
				<view class="lc-data-num">{{numList.shoucang_zhaopin_num}}</view>
				<view class="lc-data-name">收藏招聘</view>
			</view>
			<view class="lc-cde" @click="footprint">
				<view class="lc-data-num">{{numList.zuji_num}}</view>
				<view class="lc-data-name">足迹</view>
			</view>
			<view class="lc-cde" @click="coupon">
				<view class="lc-data-num">{{numList.coupon_num}}</view>
				<view class="lc-data-name">优惠券</view>
			</view>
		</view>
		<view class="lc-order">
			<view class="lc-order-head">
				<view class="lc-myorder">我的订单</view>
				<view class="all-order" @click="orderList(0)">
					<view>全部订单</view>
					<image src="/static/next.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="four-box">
				<view class="lc-order-con" @click="orderList(1)">
					<image :src="baseurl+'/imgs/m2.png'" mode="widthFix"></image>
					<view>待付款</view>
				</view>
				<view class="lc-order-con" @click="orderList(3)">
					<image :src="baseurl+'/imgs/m3.png'" mode="widthFix"></image>
					<view>待核销/已付款</view>
				</view>
				<view class="lc-order-con" @click="orderList(4)">
					<image :src="baseurl+'/imgs/m4.png'" mode="widthFix"></image>
					<view>待评价</view>
				</view>
				<view class="lc-order-con" @click="orderList(5)">
					<image :src="baseurl+'/imgs/m5.png'" mode="widthFix"></image>
					<view>退款</view>
				</view>
			</view>
		</view>
		<view class="lc-operate">
			<view class="lc-enter" @click="getCoupons">
				<view class="lc-enter-two">
					<view class="lc-enter-title">领券中心</view>
					<view class="lc-enter-name">优惠券购买</view>
				</view>
				<image :src="baseurl+'/imgs/m6.png'" mode="widthFix"></image>
			</view>
			<view class="lc-enter" @click="showShop">
				<view class="lc-enter-two" v-if="detail.shop_status==3">
					<view class="lc-enter-title">商家端</view>
					<view class="lc-enter-name">进入商家端</view>
				</view>
				<view class="lc-enter-two" v-else>
					<view class="lc-enter-title">商家入驻</view>
					<view class="lc-enter-name">申请成为商家</view>
				</view>
				<image :src="baseurl+'/imgs/m7.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="lc-more">
			<view class="lc-more-box" @click="myNotes">
				<image :src="baseurl+'/imgs/m11.png'" mode="widthFix"></image>
				<view>在线简历</view>
			</view>
			<view class="lc-more-box" @click="delivery">
				<image :src="baseurl+'/imgs/m22.png'" mode="widthFix"></image>
				<view>我的投递</view>
			</view>
			<view class="lc-more-box">
				<image :src="baseurl+'/imgs/m33.png'" mode="widthFix"></image>
				<view>在线客服</view>
				<button open-type="contact"></button>
			</view>
			<view class="lc-more-box" @click="agreement('9')">
				<image :src="baseurl+'/imgs/m44.png'" mode="widthFix"></image>
				<view>消费协议</view>
			</view>
			<view class="lc-more-box" @click="agreement('7')">
				<image :src="baseurl+'/imgs/m55.png'" mode="widthFix"></image>
				<view>关于我们</view>
			</view>
			<view class="lc-more-box" @click="agreement('8')">
				<image :src="baseurl+'/imgs/m66.png'" mode="widthFix"></image>
				<view>平台协议</view>
			</view>
			<view class="lc-more-box" @click="agreement('1')">
				<image :src="baseurl+'/imgs/m77.png'" mode="widthFix"></image>
				<view>用户协议</view>
			</view>
			<view class="lc-more-box" @click="rule">
				<image :src="baseurl+'/imgs/m88.png'" mode="widthFix"></image>
				<view>规则中心</view>
			</view>
			<view class="lc-more-box" @click="orders">
				<image :src="baseurl+'/imgs/m88.png'" mode="widthFix"></image>
				<view>拼团订单</view>
			</view>
		</view>
		<view class="lc-black" v-if="type">
			<view class="lc-white">
				<view class="lc-alert-head">
					<view>入驻类型</view>
					<image :src="baseurl+'/imgs/ss1.png'" mode="widthFix" @click="close"></image>
				</view>
				<view :class="state==1?'lc-alert-box border':'lc-alert-box'" @click="select(1)">
					<view class="lc-alert-detail">
						<view class="lc-alert-title">餐饮安全承诺商家</view>
						<view class="lc-alert-con">
							<view class="lc-alert-name">无预制、无科技狠活</view>
							<view class="lc-alert-color">入驻需交1000元保证金</view>
						</view>
					</view>
					<image :src="state==1?baseurl+'/imgs/ss2.png':baseurl+'/imgs/ss3.png'" mode="widthFix"></image>
				</view>
				<view :class="state==2?'lc-alert-box border':'lc-alert-box'" @click="select(2)">
					<view class="lc-alert-detail">
						<view class="lc-alert-title">餐饮商家</view>
						<view class="lc-alert-con">
							<view class="lc-alert-name">免费入驻</view>
						</view>
					</view>
					<image :src="state==2?baseurl+'/imgs/ss2.png':baseurl+'/imgs/ss3.png'" mode="widthFix"></image>
				</view>
				<view class="lc-ok" @click="subShop">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				baseurl: getApp().globalData.baseurl,
				headHeight: 0,
				state: 1,
				type: false,
				isLogin: false,
				detail: {},
				app: getApp().globalData,
				numList: {}
			}
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		onShow() {
			uni.login({
				provider: 'weixin', //使用微信登录
				success: (loginRes) => {
					console.log("=====================================");
					console.log(loginRes.code);
					this.app.post('/api/user/bind_wx', {
						code: loginRes.code
					}).then(res => {
						console.log("============")
						console.log(res)
					})
				}
			});
			console.log(this.$store.state.user.isLogin)
			this.isLogin = this.$store.state.user.isLogin

			this.app.post('/api/chef/user/info').then(res => {
				console.log(res)
				this.detail = res
				uni.setStorageSync('moneys', res.shop_youzhi_price);
			})
			this.app.post('/api/wanlshop/user/gerenzhongxin').then(res => {
				console.log(res)
				this.numList = res


			})
		},
		onLoad() {
			this.headHeight = (uni.getSystemInfoSync().statusBarHeight + 45) * 2
		},
		methods: {
			login() {
				this.$wanlshop.to('/pages/user/auth/auth');
			},
			setting() {
				// this.$wanlshop.to('/pages/user/setting/setting');
				uni.navigateTo({
					url: '/pages/user/setting/setting'
				})
			},
			gouser() {
				uni.navigateTo({
					url: '/pages/user/setting/user'
				})
			},
			select(state) {
				this.state = state
			},
			close() {
				this.type = false
			},
			showShop() {
				if (this.detail.shop_status == -1) {
					uni.navigateTo({
						url: '/pages/lc/electron/electron'
					})
				} else if (this.detail.shop_status == 3) {
					uni.navigateTo({
						url: '/pages/new/shop/shop'
					})
				} else if (this.detail.shop_status == 2) {
					if (this.detail.shop_auth_status == 2 && this.detail.shop_auth_pay_zt == 0) {
						uni.navigateTo({
							url: '/pages/lc/payPages/payPages?state=2&order_sn=' + this.detail.order_sn
						})
					} else {
						uni.navigateTo({
							url: '/pages/new/success/success'
						})
					}
				} else if (this.detail.shop_status == 4) {
					if (this.detail.shop_auth_status == 2 && this.detail.shop_auth_pay_zt == 0) {
						uni.navigateTo({
							url: '/pages/lc/payPages/payPages?state=2&order_sn=' + this.detail.order_sn
						})
					} else {
						uni.navigateTo({
							url: '/pages/new/fail/fail?reason=' + this.detail.refuse
						})
					}
				}
			},
			orders() {
				uni.navigateTo({
					url: '/pages/apps/groups/order/order'
				})
			},
			collectBuying() {
				uni.navigateTo({
					url: '/pages/lc/collectBuying/collectBuying'
				})
			},
			collectHire() {
				uni.navigateTo({
					url: '/pages/lc/collectHire/collectHire'
				})
			},
			footprint() {
				uni.navigateTo({
					url: '/pages/lc/footprint/footprint'
				})
			},
			coupon() {
				uni.navigateTo({
					url: '/pages/sc/selectCoupon/selectCoupon'
				})
			},
			orderList(num) {
				console.log(num)
				uni.navigateTo({
					url: '/pages/lc/orderList/orderList?state=' + num
				})
			},
			getCoupons() {
				uni.navigateTo({
					url: '/pages/sc/getCoupons/getCoupons'
				})
			},
			subShop() {
				uni.navigateTo({
					url: '/pages/lc/subShop/subShop?state=' + this.state
				})
			},
			agreement(id) {
				uni.navigateTo({
					url: '/pages/sc/agreement/agreement?id=' + id
				})
			},
			about() {
				uni.navigateTo({
					url: '/pages/lc/about/about'
				})
			},
			delivery() {
				uni.navigateTo({
					url: '/pages/lc/delivery/delivery'
				})
			},
			myNotes() {
				uni.navigateTo({
					url: '/pages/lc/myNotes/myNotes'
				})
			},
			rule() {
				uni.navigateTo({
					url: '/pages/lc/rule/rule'
				})
			},
		}
	}
</script>

<style lang="scss">
	.lc-head-cons {
		background: linear-gradient(to bottom, #E7F6C3, #F7F7F7);
	}

	.lc-user-box {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.lc-user-img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}

		.lc-user-detail {
			width: 560rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 36rpx;
				color: #3D3D3D;
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

	}

	.lc-data-box {
		width: 690rpx;
		height: 190rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 30rpx;

		.lc-cde {
			width: 172rpx;

			.lc-data-num {
				width: 100%;
				text-align: center;
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
			}

			.lc-data-name {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}
	}

	.lc-order {
		width: 690rpx;
		margin-left: 30rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		padding: 30rpx 0;

		.lc-order-head {
			width: 630rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 30rpx;

			.lc-myorder {
				font-size: 30rpx;
				color: #333333;
			}

			.all-order {
				display: flex;
				align-items: center;

				view {
					font-size: 24rpx;
					color: #999999;
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 6rpx;
				}
			}
		}

		.four-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.lc-order-con {
				width: 170rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}

				view {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					color: #333333;
					margin-top: 12rpx;
				}
			}
		}

	}

	.lc-operate {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;

		.lc-enter {
			width: 330rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lc-enter-two {
				margin-left: 28rpx;

				.lc-enter-title {
					font-size: 33rpx;
					color: #333333;
				}

				.lc-enter-name {
					font-size: 26rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}

			image {
				width: 142rpx;
				height: 142rpx;
			}
		}

	}

	.lc-more {
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 40rpx;

		.lc-more-box {
			width: 172rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 40rpx;
			position: relative;

			button {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 9;
				opacity: 0;
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}

			view {
				font-size: 24rpx;
				color: #333333;
				width: 100%;
				text-align: center;
				margin-top: 10rpx;
			}
		}
	}

	.lc-black {
		width: 750rpx;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 666;
		background-color: rgba(0, 0, 0, .7);

		.lc-white {
			width: 750rpx;
			background-color: #F6F6F6;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			border-radius: 50rpx 50rpx 0 0;
			position: fixed;
			bottom: 0;
			padding-bottom: 30rpx;

			.lc-alert-head {
				width: 660rpx;
				height: 158rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					font-size: 36rpx;
					color: #3D3D3D;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.lc-alert-box {
				width: 690rpx;
				padding: 30rpx 0;
				background-color: #fff;
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;
				border: 1px solid #fff;

				.lc-alert-detail {
					width: 500rpx;
					margin-left: 30rpx;

					.lc-alert-title {
						font-size: 30rpx;
						color: #3D3D3D;
					}

					.lc-alert-con {
						margin-top: 20rpx;

						.lc-alert-name {
							font-size: 26rpx;
							color: #666666;
						}

						.lc-alert-color {
							font-size: 26rpx;
							color: #84BD00;
							margin-top: 10rpx;
						}
					}
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 30rpx;
				}
			}

			.border {
				border: 1px solid #84BD00;
			}

			.lc-ok {
				width: 690rpx;
				height: 76rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				color: #FFFFFF;
				background-color: #84BD00;
			}
		}
	}
</style>